<script setup lang="tsx">
import type { BindItem } from '../../oauth-common';

import { onMounted, shallowRef } from 'vue';

import { Card, Empty, Modal } from 'ant-design-vue';

import { authUnbinding } from '#/api';
import { socialList } from '#/api/system/social';

import { accountBindList, handleAuthBinding } from '../../oauth-common';

const bindList = shallowRef<BindItem[]>([]);

async function loadData() {
  const resp = await socialList();

  accountBindList.forEach((item) => {
    /**
     * 平台转小写
     */
    const dbSocial = resp
      .map((social) => social.source.toLowerCase())
      .toString();

    item.bind = dbSocial.includes(item.source.toLowerCase());
    /**
     * 添加info信息
     */
    if (item.bind) {
      item.info = resp.find((social) =>
        social.source.toLowerCase().includes(item.source.toLowerCase()),
      );
    }
  });

  bindList.value = [...accountBindList];
}

onMounted(() => {
  loadData();
});

/**
 * 解绑账号
 */
function handleUnbind(record: BindItem) {
  if (!record.info) {
    return;
  }
  Modal.confirm({
    type: 'warning',
    title: '解除授权绑定',
    content: `确定解绑【${record.title}】平台的【${record.info.userName}】账号吗？`,
    async onOk() {
      await authUnbinding(record.info!.id);
      await loadData();
    },
  });
}

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
</script>

<template>
  <Card
    class="h-full min-[1200px]:w-[550px]"
    :bordered="false"
    title="第三方账号绑定"
    :body-style="{ height: '430px', overflowY: 'auto' }"
  >
    <div v-if="bindList.length > 0" class="grid grid-cols-1 gap-3">
      <Card
        class="transition-shadow duration-300 hover:shadow-md"
        v-for="item in bindList"
        :key="item.source"
      >
        <div class="flex w-full items-center gap-4">
          <component
            :is="item.avatar"
            v-if="item.avatar"
            :style="item?.style ?? {}"
            class="size-[40px]"
          />
          <div class="flex flex-1 items-center justify-between">
            <div class="flex flex-col">
              <h4 class="mb-[4px] text-[14px] text-black/85 dark:text-white/85">
                {{ item.title }}
              </h4>
              <span class="text-black/45 dark:text-white/45">
                <template v-if="!item.bind">
                  {{ item.description }}
                </template>
                <template v-if="item.bind && item.info">
                  {{ item.info.createTime }}【{{ item.info.nickName }}】已绑定
                </template>
              </span>
            </div>
            <a-button
              size="small"
              :type="item.bind ? 'default' : 'link'"
              @click="
                item.bind ? handleUnbind(item) : handleAuthBinding(item.source)
              "
            >
              {{ item.bind ? '解绑' : '绑定' }}
            </a-button>
          </div>
        </div>
      </Card>
    </div>
    <div
      v-if="bindList.length === 0"
      class="flex items-center justify-center rounded-lg border py-4"
    >
      <Empty :image="simpleImage" description="暂无可绑定的第三方账户" />
    </div>
  </Card>
</template>

<style lang="scss" scoped>
:deep(.ant-list-item) {
  padding: 6px;
}
</style>
